<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <title>权限组列表</title>
    <link rel="stylesheet" href="__STATIC__plug/layui/css/layui.css">
    <link rel="stylesheet" href="__STATIC__admin.css">
</head>

<body class="layui-layout-body">
    <blockquote class="layui-elem-quote">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" style="width: 300px;" name="keywords" placeholder="请输入权限组名称查询" class="layui-input">
            </div>
            <button class="layui-btn" id="search_btn">查询</button>
        </div>
        <div class="layui-inline">
            <div class="layui-word-aux">支持模糊查询</div>
        </div>
        <div class="layui-inline" id="search_info"></div>
    </blockquote>
    <div class="group-button">
        <div class="layui-inline">
            <a href="javascript:;" id="add" class="layui-btn layui-btn-sm layui-btn-normal">添加权限组</a>
        </div>
    </div>
    <div class="layui-form">
        <table class="layui-table" lay-data="{height:'500px', url:'{:url('auth_group/index')}',page:'true',limit:20,id:'list'}" lay-filter="list">
            <thead>
                <tr>
                    <th lay-data="{checkbox:true,width:'5%'}"></th>
                    <th lay-data="{field:'groupname', width:'70%',align:'left'}">权限组名称</th>
                    <th lay-data="{field:'status',width:'10%' ,align:'center',templet: '#statusTpl'}">状态</th>
                    <th lay-data="{fixed: 'right', width:'15%', align:'center', toolbar: '#barDemo'}">操作</th>
                </tr>
            </thead>
        </table>
    </div>
    <script type="text/html" id="statusTpl">
        {{# if( d.status == 0 ){ }}
            <span style="color:#009688;">可用</span>
        {{# }else{ }}
            <span style="color:#FF5722;">不可用</span>
        {{# } }}
    </script>
    <script type="text/html" id="barDemo">
        {{# if( d.id != 1 ){ }}
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        {{# }else{ }}
            <a class="layui-btn layui-btn-xs layui-btn-disabled">编辑</a>
        {{# } }}
        
        {{# if( d.isDel == 0 ){ }}
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        {{# }else{ }}
            <a class="layui-btn layui-btn-disabled layui-btn-xs">删除</a>
        {{# } }}
        {{# if( d.id != 1 ){ }}
            <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit-auth">编辑权限</a>
        {{# }else{ }}
            <a class="layui-btn layui-btn-xs layui-btn-warm layui-btn-disabled">编辑权限</a>
        {{# } }}
    </script>
</body>
<script type="text/javascript" src="__STATIC__plug/layui/layui.js"></script>
<script>
layui.use(['element', 'jquery', 'layer', 'table', 'form'], function() {
    var element = layui.element,
        layer = layui.layer,
        table = layui.table,
        form = layui.form,
        $ = layui.jquery;
    $("#add").on('click', function() {
        layer.open({
            type: 2,
            title: '添加权限组',
            area: ['500px', '300px'],
            content: "{:url('auth_group/add')}"
        });
    });
    $("#search_btn").on("click",function(){
        var keywords = $.trim( $("input[name=keywords]").val() )
        var where = {'keyword':keywords}
        tableReload(where,1);
    })
    table.on('tool(list)',function(obj){
        var data = obj.data;
        if( obj.event === 'edit' ){
            layer.open({
                type: 2,
                title: '编辑',
                area: ['500px', '300px'],
                content: "{:url('auth_group/edit')}?id="+data.id
            });
        }else if( obj.event === 'del' ){
            layer.confirm('确定删除吗？', function(index){
                param={};
                param['id'] = data.id;
                ajax("{:url('auth_group/del')}",param,{});
            });
        }else if( obj.event === 'edit-auth' ){
            layer.open({
                type: 2,
                title: '编辑权限',
                area: ['800px', '600px'],
                content: "{:url('auth_group/editAuth')}?id="+data.id
            });
        }

    });
    function ajax(url, param, where, currPage) {
        layer.load(1, {
            shade: [0.1, '#ddd'] //0.1透明度的白色背景
        });
        $.getJSON(url, param, function(res) {
            layer.closeAll('loading');
            if (res.err === 0) {
                layer.msg(res.msg);
                if (where) {
                    tableReload(where, currPage)
                }
            } else {
                layer.msg(res.content);
            }
        });
    }
    //重新加载表格
    function tableReload(where, currPage) {
        var currPage = currPage ? currPage : $('.layui-laypage-skip.layui-input').val();
        //执行重载
        table.reload('list', {
            page: {
                curr: currPage //重新从第 1 页开始
            },
            where: where
        });
    }
});
</script>

</html>